<template>
    <div>
        <button @click="displaySwitch">btn</button>
        <p v-show="isShow">
        123456qwer
        </p>

<!--
https://www.cnblogs.com/wangyfax/p/10076107.html
    1、v-if 的特点：

    实现方式：根据后面数据的真假判断是否重新删除或创建元素。
    性能消耗：有较高的切换性能消耗。
    编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件。
    2、v-show的特点：

    实现方式：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 。
    性能消耗：有较高的初始渲染消耗。
    编译过程：v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留。
    注意：

          ① 如果元素设计到频繁的切换，最好不要使用v-if，而是推荐使用v-show。

          ② 如果元素可能永远也不会被显示出来，则推荐使用 v-if。
-->
    </div>
</template>

<script>
    export default {
        name: "DemoVshow",
        data(){
            return{
                isShow:true
            }
        },
        methods:{
            displaySwitch(){
                if (this.isShow === true){
                    this.isShow = false;
                }else{
                    this.isShow = true;
                }
            }

        }
    }
</script>

<style scoped>

</style>
